<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 如果要使用组件，直接把组件的名称，以HTML 标签的形式，引入到页面中-->
			<mycom1></mycom1>
		</div>
		
		<script type="text/javascript">
			//1.使用Vue.extend 来创建全局的Vue组件
			var com1=Vue.extend({
				template:'<h3>这是使用 Vue.extend 创建的组件</h3>'
				//通过template 属性，指定了组件要展示的HTML结构
			})
			//2.使用 Vue.component('组件',创建出来的组件模板对象)
			//Vue.component('myCom1',com1)  如果使用驼峰命名,在引用的时候大小写之间用-链接
			//用小写直接使用名称
			Vue.component('mycom1',com1)
			
			/*创建组件的第一种方式
			 * 
			 * Vue.component 第一个参数：组件的名称，将来在引用组件的时间，就是一个 标签形式来引用
			 * 第二个参数：Vue.extend 创建的组件，其中 template 就是组件将来要展示的HTML的内容
			 * 
			 * Vue.component('mycom1',Vue.extend({
			 * 	template'<h3>这是使用 Vue.extend 创建的组件</h3>'
			 * }))

			 * */
			
			/*
			  第二种创建组件的方式
			  Vue.component('mycom2',{
			  		template:'<div><h3>这是使用 Vue.extend 创建的组件</h3><span>123</span></div>'
			  })
			 * 
			 * */
			
			var vm=new Vue({
				el:"#app"
				
			});
		</script>
	</body>
</html>
